<template>
    <vue-scroll :ops="ops">
        <div class="chart-container">
            <div class="connect">
                <el-form :model="paramForm" ref="paramForm" label-width="100px" class="demo-ruleForm"
                    label-position="top">
                    <el-form-item label="站点标识" prop="type">
                        <el-input v-model="paramForm.command.DI" :placeholder="'请输入内容'" style="width: 100%;"
                            class="filter-item" @keyup.enter.native="handleFilter" />
                    </el-form-item>
                    <el-form-item label="设备类型" prop="type">
                        <el-input v-model=paramForm.command.QZ :placeholder="'请输入内容'" style="width: 100%;"
                            class="filter-item" @keyup.enter.native="handleFilter" />
                    </el-form-item>
                    <el-form-item label="设备标识" prop="type">
                        <el-input v-model=paramForm.command.ID :placeholder="'请输入内容'" style="width: 100%;"
                            class="filter-item" @keyup.enter.native="handleFilter" />
                    </el-form-item>
                    <el-form-item label="序列号" prop="type">
                        <el-input v-model=paramForm.command.SN :placeholder="'请输入内容'" style="width: 100%;"
                            class="filter-item" @keyup.enter.native="handleFilter" />
                    </el-form-item>
                    <el-form-item label="协议序列号" prop="type">
                        <el-input v-model=paramForm.command.SETNET :placeholder="'请输入内容'" style="width: 100%;"
                            class="filter-item" @keyup.enter.native="handleFilter" />
                    </el-form-item>
                    <el-form-item label="初始方位角偏差" prop="type">
                        <el-input v-model=paramForm.command.BANDWIDTH :placeholder="'请输入内容'" style="width: 100%;"
                            class="filter-item" @keyup.enter.native="handleFilter" />
                    </el-form-item>
                    <el-form-item label="初始仰角偏差" prop="type">
                        <el-input v-model=paramForm.command.RADIO_BAUD :placeholder="'请输入内容'" style="width: 100%;"
                            class="filter-item" @keyup.enter.native="handleFilter" />
                    </el-form-item>
                    <div class="flex">
                        <el-form-item>
                            <el-button type="primary" @click="readForm()">读取配置</el-button>
                            <el-button type="success" @click="submit()">保存配置</el-button>
                        </el-form-item>
                    </div>
                </el-form>
            </div>
        </div>
        <!-- {{ busiParamMessage }} -->
    </vue-scroll>
</template>

<script>
import { readParam, updateParam, loadData } from '@/api/param';

export default {
    name: 'LineChart',

    data() {
        return {
            listLoading: true,
            paramForm: {
                command: {
                    DI: '',
                    QZ: '',
                    ID: '',
                    SN: '',
                    SETNET: '',
                    SWITCHAFC: '',
                    BANDWIDTH: '',
                    RADIO_BAUD: '',
                    LAT: '',
                    LONG: '',
                    ALT: '',
                    FREQ: ''
                }
            },

        };
    },
    mounted() {
        this.load();
    },
    methods: {
        async readForm() {
            // alert('读取')
            const paramBody = { "device": "GTCZ1", "target": "YSRP", "command": "SS,YSRP,001", "transtype": "1003" };
            const result = await readParam(paramBody)
            console.log(result)
            // this.paramForm = result.data
            //结果由前端的websocket接收
        },
        async updateParam() {
            // alert('保存')
            const paramBody = { "device": "GTCZ1", "target": "YSRP", "command": "SN,YSRP,001,G11160000690123456701201605200000000", "transtype": "1003" };
            const result = await updateParam(paramBody)
            console.log(result)
            // this.paramForm = result.data
            //结果由前端的websocket接收
        },
        async load() {
            // alert('保存')
            this.listLoading = true
            try {
                const result = await loadData()
                console.log(result)
                this.paramForm = result.data
            } catch (error) {
                this.listLoading = false
            }
            //结果由前端的websocket接收
            setTimeout(() => {
                this.listLoading = false
            }, 1 * 1000)
        }
    },
    computed: {
        remoteParamMessage() {
            return this.$store.getters.remoteParamMessage
        }
    },
    watch: {
        remoteParamMessage: function (newValue, oldValue) {
            // 当state的值变化时，这个函数会被调用
            console.log('The new state is: ' + newValue);
            // 你可以在这里根据新的state值进行相应的操作

            //请求网络数据 刷新页面
            // this.$store.dispatch('zuWang/setZuwangFromJS', '1')
            this.load()
        }
    }
}
</script>

<style scoped>
.chart-container {
    position: relative;
    width: 100%;
    height: calc(100vh - 152px);
    padding: 20px 20px 20px 20px;
    background-color: #ffffff;
    font-family: SourceHanSansSC-regular;
    font-size: 16px;
}

.trafficChart {
    width: 100%;
    height: 288px;
    /* background-color: #cccccc; */
}

.connect {
    height: calc(100% - 300px);
    /* overflow: auto; */
}

::v-deep .el-form-item--small.el-form-item {
    margin-bottom: 18px;
}

::v-deep .el-form-item--small .el-form-item__label {
    line-height: 20px;
}

.flex {
    display: flex;
    justify-content: center;
}
</style>